<!-- 报修管理列表 -->
<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="app-title">报修管理列表</div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item label="编号">
					<el-input v-model="formInline.id" placeholder="请输入编号查询" clearable @change="sousuo()"></el-input>
				</el-form-item>
				<el-form-item label="报修人">
					<el-input v-model="formInline.name" placeholder="请输入报修人姓名查询" clearable @change="sousuo()"></el-input>
				</el-form-item>
				<el-form-item label="报修类型">
					<el-cascader
						v-model="formInline.type"
						:options="repairType"
						clearable
						:props="{ expandTrigger: 'hover', checkStrictly: true, label: 'type_name', value: 'type_id' }"
						@change="sousuo()"
					></el-cascader>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="formInline.state" placeholder="请选择" clearable @change="sousuo()">
						<el-option label="未受理" value="0"></el-option>
						<el-option label="受理中" value="1"></el-option>
						<el-option label="已受理" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="物业">
					<el-select v-model="formInline.wuye_id" placeholder="请选择" clearable @change="loadXiaoQuList()">
						<el-option :label="item.wy_name" :value="item.id" v-for="(item, index) in wuyeList" :key="index"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="小区">
					<el-select v-model="formInline.xiaoqu_id" placeholder="请选择" clearable @change="sousuo()">
						<el-option :label="item.xq_name" :value="item.id" v-for="(item, index) in xiaoquList" :key="index"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="时间筛选">
					<el-date-picker
						v-model="date"
						type="daterange"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						@change="sousuo()"
					></el-date-picker>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="sousuo()" icon="el-icon-search">查询/筛选</el-button></el-form-item>
				<el-form-item>
					<el-button @click="drawer = true" type="primary"  icon="el-icon-s-tools">列表字段</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="tableData" style="width: 100%">
				<el-table-column min-width="130px" v-if="tableTitleData['id'].value" key="id" prop="id" label="编号"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['name'].value" key="name" prop="name" label="报修人"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['address'].value" key="address" prop="address" label="报修地址"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['content'].value" key="content" prop="content" label="备注详情"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['tel'].value" key="tel" prop="tel" label="手机号"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['wy_name'].value" key="wy_name" prop="wy_name" label="物业公司"></el-table-column>
				<!-- <el-table-column min-width="120px" v-if="tableTitleData['xq_name'].value" key="xq_name" prop="xq_name" label="小区"></el-table-column> -->
				<el-table-column min-width="120px" v-if="tableTitleData['type_text'].value" key="type_text" prop="type_text" label="报修类型"></el-table-column>
				<el-table-column min-width="100px" v-if="tableTitleData['create_time'].value" key="create_time" prop="create_time" label="上报时间"></el-table-column>
				<el-table-column min-width="110px" v-if="tableTitleData['visit_time'].value" key="visit_time" prop="visit_time" label="上门时间">
					<template slot-scope="scope">
						<div>{{ strJq(scope.row.visit_time) }}</div>
						<div>{{ scope.row.visit_time_str }}</div>
					</template>
				</el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['notifyWorkerStr'].value" key="notifyWorkerStr" prop="notifyWorkerStr" label="通知维修工"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['receiveWorkerStr'].value" key="receiveWorkerStr" prop="receiveWorkerStr" label="接单维修工"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['evaluate_remark'].value" key="evaluate_remark" prop="evaluate_remark" label="评价"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['total_amount'].value" key="total_amount" prop="total_amount" label="金额"></el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['pay_state'].value" key="pay_state" prop="pay_state" label="支付状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.pay_state == 1" type="danger" effect="plain">待支付</el-tag>
						<el-tag v-else-if="scope.row.pay_state == 2" type="success" effect="plain">已支付</el-tag>
						<el-tag v-else-if="scope.row.pay_state == 3" effect="info">无需支付</el-tag>
					</template>
				</el-table-column>
				<el-table-column min-width="120px" v-if="tableTitleData['state'].value" key="state" label="报修单状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.state == 0" type="info">未受理</el-tag>
						<el-tag v-else-if="scope.row.state == 1" type="warning">受理中</el-tag>
						<el-tag v-else-if="scope.row.state == 2">已受理</el-tag>
					</template>
				</el-table-column>
				<el-table-column key="set" label="操作" width="80px" fixed="right">
					<template slot-scope="scope">
						<el-button  plain size="small" @click="details(scope.row.id)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="el-pagination">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[10, 100, 200, 300, 400]"
					:page-size="size"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</div>

		<el-dialog title="报修详情" :visible.sync="dialogVisible" width="800px" top="30px">
			<el-descriptions title="" border :column="2">
				<el-descriptions-item label="报修人">{{ form.name }}</el-descriptions-item>
				<el-descriptions-item label="编号">{{ form.id }}</el-descriptions-item>
				<el-descriptions-item label="手机号">{{ form.tel }}</el-descriptions-item>
				<el-descriptions-item label="报修类型">{{ form.typeName }}</el-descriptions-item>

				<el-descriptions-item label="报修时间">{{ form.create_time }}</el-descriptions-item>
				<el-descriptions-item label="上门时间">{{ form.visit_time }} {{ form.visit_time_str }}</el-descriptions-item>

				<el-descriptions-item label="接单维修工">{{ form.receive_worker_name }}</el-descriptions-item>
				<el-descriptions-item label="报修备注" :span="2">{{ form.content }}</el-descriptions-item>

				<el-descriptions-item label="报修地址" :span="2">{{ form.addressName }}</el-descriptions-item>
				<el-descriptions-item label="物料列表" :span="2">
					<div v-for="(item, index) in form.materialItemList" :key="index" class="wu-item">
						<el-card>
							<div class="wl-view">
								<div>物料：{{ item.material_name }}</div>
								<div>数量：{{ item.number }}</div>
								<div>单价：{{ item.money }}</div>
								<div>总价：{{ item.total_prices }}</div>
							</div>
						</el-card>
					</div>
				</el-descriptions-item>
				<el-descriptions-item label="维修进度" :span="2">
					<div v-for="(item, index) in form.speedList" :key="index" class="wu-item">
						<el-card>
							<div class="">
								<div>进度：{{ item.speed_info }}</div>
								<div>备注：{{ item.remark }}</div>
							</div>
						</el-card>
					</div>
				</el-descriptions-item>
				<!-- <el-descriptions-item label="回复内容" :span="2">
					<div style="display: flex;align-items: center;" v-for="(item, index) in form.repairReply" :key="index">
						{{ item.create_time }} :
						<img :src="item.user_logo" style="width: 20px;margin-right: 5px;" />
						{{ item.reply_name }} => {{ item.content }}
					</div>
				</el-descriptions-item> -->
				<el-descriptions-item label="维修质量" :span="2">
					<el-rate v-model="form.evaluate_zl" disabled text-color="#ff9900" score-template="{value}"></el-rate>
				</el-descriptions-item>
				<el-descriptions-item label="维修速度" :span="2">
					<el-rate v-model="form.evaluate_sd" disabled text-color="#ff9900" score-template="{value}"></el-rate>
				</el-descriptions-item>
				<el-descriptions-item label="维修态度" :span="2">
					<el-rate v-model="form.evaluate_td" disabled text-color="#ff9900" score-template="{value}"></el-rate>
				</el-descriptions-item>
				<el-descriptions-item label="评价" :span="2">{{ form.evaluate_remark }}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>
		
		<el-drawer
		  title="设置列表显示字段"
		  :visible.sync="drawer"
		  direction="rtl">
		 <div class="set-table-title">
			<div style="display: flex;justify-content: flex-end;">
				 <el-button type="primary" size="mini" style="margin-bottom: 20px;" @click="setTableTitle('all')" >全选</el-button>
				 <el-button type="primary" size="mini" style="margin-bottom: 20px;" @click="setTableTitle('reset')" plain>重置</el-button>
			</div>
			<div class="set-table-title-item" v-for="(item,index) in tableTitleData" :key="index">
				<el-switch v-model="item.value" @change="keepRecords()"></el-switch>
				<div class="set-table-title-name">{{item.name}}</div>
			</div>
		 </div>
		</el-drawer>
	</div>
</template>

<script>
import Api from '@/api/pages/repairs/repairs.js';
import wuyeApi from '@/api/pages/wuye/wuye.js';
import xiaoquApi from '@/api/pages/wuye/house.js';
export default {
	name: 'repairsr_list',
	data() {
		return {
			isAll:false,
			drawer:false,
			dialogVisible: false,
			formInline: {
				start_time: '',
				end_time: '',
				wuye_id: '',
				xiaoqu_id: '',
				type: [],
				state: '',
				name:'',
				id:''
			},
			form: {},
			page: 1,
			size: 10,
			total: 0,
			date: [],
			tableData: [],
			tableTitleData:{
				"id":{name:'编号',value:true},
				"name":{name:'报修人',value:true},
				"address":{name:'报修地址',value:true},
				"content":{name:'备注详情',value:true},
				"tel":{name:'手机号',value:true},
				"wy_name":{name:'物业公司',value:true},
				// "xq_name":{name:'小区',value:true},
				"type_text":{name:'报修类型',value:true},
				"create_time":{name:'上报时间',value:false},
				"visit_time":{name:'上门时间',value:false},
				"notifyWorkerStr":{name:'通知维修工',value:false},
				"receiveWorkerStr":{name:'接单维修工',value:true},
				"evaluate_remark":{name:'评价',value:false},
				"total_amount":{name:'金额',value:true},
				"pay_state":{name:'支付状态',value:true},
				"state":{name:'报修单状态',value:true},
			},
			wuyeList: [],
			xiaoquList: [],
			repairType: []
		};
	},
	mounted() {
		let tableTitleData =JSON.parse(localStorage.getItem('tableTitleData'));
		if(tableTitleData) {
			this.tableTitleData = tableTitleData;
		}
		this.getWuyeList();
		this.loadXiaoQuList();
		this.loadRepairType();
	},
	methods: {
		handleClose() {
			
		},
		getData() {
			let data = {
				pageNumber: this.page,
				pageSize: this.size
			};
			if (this.formInline.name) {
				data['name'] = this.formInline.name;
			}
			if (this.formInline.id) {
				data['id'] = this.formInline.id;
			}
			if (this.formInline.xiaoqu_id) {
				data['xiaoqu_id'] = this.formInline.xiaoqu_id;
			}
			if (this.formInline.wuye_id) {
				data['wuye_id'] = this.formInline.wuye_id;
			}
			if (this.formInline.state) {
				data['state'] = this.formInline.state;
			}
			if (this.formInline.type.length) {
				data['type_pid'] = this.formInline.type[this.formInline.type.length - 1];
			}
			if (this.date && this.date.length) {
				data['start_time'] = this.date[0];
				data['end_time'] = this.date[1];
			}
			Api.query(data).then(res => {
				if (res.state) {
					this.tableData = res.data.list;
					this.total = res.data.totalRow;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 树形报修类型
		loadRepairType() {
			Api.loadRepairType().then(res => {
				if (res.state) {
					this.repairType = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 详情
		details(id) {
			Api.details({
				id: id
			}).then(res => {
				if (res.state) {
					this.form = res.data;
					this.dialogVisible = true;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 获取物业公司
		getWuyeList() {
			wuyeApi.getWuyeList().then(res => {
				if (res.state) {
					this.wuyeList = res.data;
				} else {
					this.$message(res.msg);
				}
			});
		},
		// 字符串截取
		strJq(str) {
			if(str) {
				return str.substring(0,10)
			}
		},
		// 获取小区
		loadXiaoQuList() {
			xiaoquApi
				.loadXiaoQuList({
					wyId: this.formInline.wuye_id
				})
				.then(res => {
					if (res.state) {
						if (res.data.findIndex(item => item.id == this.formInline.xiaoqu_id) == '-1') {
							this.formInline.xiaoqu_id = '';
						}
						this.xiaoquList = res.data;
					} else {
						this.$message(res.msg);
					}
					this.getData();
				});
		},
		sousuo() {
			this.page = 1;
			this.getData();
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.page = val;
			this.getData();
		},
		setTableTitle(type) {
			for (let key in this.tableTitleData) {
				this.tableTitleData[key].value = type == 'all' ? true : false;
			}
			this.keepRecords();
		},
		keepRecords() {
			localStorage.setItem('tableTitleData',JSON.stringify(this.tableTitleData))
		}
	}
};
</script>
<style lang="scss" scoped>
.wu-item {
	margin-bottom: 10px;
}
.wu-item:last-child {
	margin-bottom: 0px;
}
.wl-view {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.set-table-title{
	padding: 20px 30px;
	.set-table-title-item{
		display: flex;
		align-items: center;
		border: 1px solid #eee;
		border-radius: 5px;
		padding: 5px;
		margin-bottom:10px;
		.set-table-title-name{
			margin-left: 10px;
		}
	}
}
</style>

<style lang="scss">
.dialogVideo {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
